<template>
    <div class="demo">
        <h1>{{msg}}</h1>
        <h2>学校名称: {{name}}</h2>
        <h2>地址: {{address}}</h2>
    </div>
</template>

<script>

    export default {
        name: 'SchoolComponent',
        data() {
            return {
                msg: "学校信息",
                name: '清华大学', //固定数据, 支持用标签的地方传参
                address: '不二家'
            }
        },
        methods: {
            changeMsg(data) {
                this.msg = data
            }
        },
        mounted() {
            this.$bus.$on('receiveData', this.changeMsg) //监听自定义事件, 接收参数
        },
        beforeDestroy() {
            this.$bus.$off('receiveData') //解绑自定义事件
        }
    }    
</script>

<!-- 不同组件中的样式名重名会发生冲突, 后引入的会覆盖先引入的插件的同名样式, 可以通过scope限制作用范围, 默认全局, lang 声明css语言 支持less 等写法 -->
<style scoped>
    .demo {
        background-color: #f00;
    }
</style>